<template>
  <div id="wrap">
    <van-row class="box">
      <van-col span="6" class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in list"
            :key="item.id"
            :title="item.title"
            @click="change(index)"
          />
        </van-sidebar>
      </van-col>
      <van-col span="18" class="right" @scroll.native="scrl">
        <div v-for="item in list" :key="item.id">
          <h1>{{ item.title }}</h1>
          <van-card
            v-for="i in item.children"
            :key="i.cid"
            :price="i.price"
            :title="i.title"
            :thumb="i.img"
            @click="gotodetail(i)"
          >
            <template #footer>
              <van-icon
                name="cart-circle-o"
                size="30"
                @click.stop="add($event, i)"
              />
            </template>
          </van-card>
        </div>
      </van-col>
    </van-row>
    <shopcar :show="show" @close="close"></shopcar>
    <!-- 购物车子组件 -->

    <ball :x="x" :y="y" :flag="flag" @changeflag="changeflag"></ball>
    <!-- 小球动画 -->

    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="show = !show"
      />
      <van-goods-action-icon
        icon="shop-o"
        text="总价"
        :badge="$store.getters.sum"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 底部菜单 -->
  </div>
</template>
<script>
import shopcar from "../components/shopcar.vue";

import ball from "../components/ball.vue";
export default {
  data() {
    return {
      list: [],
      activeKey: 0,
      heights: [],
      show: false,
      //控制购物车弹出层
      flag: false,
      //   控制小球
      x: 0,

      y: 0,
      //控制小球出现的位置
    };
  },
  components: {
    shopcar,
    ball,
  },
  mounted() {
    this.$axios.get("/aaa.json").then((res) => {
      this.list = res.data.data;
      this.$nextTick(() => {
        var tags = document.querySelectorAll(".right>div");
        console.log(tags);
        for (var i = 1; i < tags.length; i++) {
          this.heights.push(tags[i].offsetTop);
          //   一个元素到网页顶部的距离
        }
        //获取 右侧内容里所有div到元素顶部的距离
      });
    });
  },
  methods: {
    change(index) {
      document.querySelector(".right").scrollTop = this.heights[index - 1];
      //   点击左侧菜单 ，让右侧的滚动条发生变化
    },
    scrl() {
      //右侧滚动时触发
      let scrl = document.querySelector(".right").scrollTop;
      //   获取元素被卷进去的距离
      console.log(scrl);
      //   判断 卷进去的距离和 heights（内容元素高度）的关系
      // 如果到了一定的程度 改变activekey

      //   document.body.offsetHeight;
      //   获取窗口的高度

      this.heights.forEach((item, index) => {
        if (scrl == 0) {
          this.activeKey = 0;
        }
        if (index > 0) {
          if (
            scrl > this.heights[index - 1] - document.body.offsetHeight &&
            scrl <= item
          ) {
            this.activeKey = index;
          }
        }
      });
    },

    add(e, i) {
      this.flag = true;
      let rect = e.target.getBoundingClientRect(); //拿到点击的加购物车的位置,这里不直接取值（我是用的绝对定位，当然可以直接取值）的原因是，商品列表中每个加号的位置是不固定的，如果上下滑动了，这个位置就不确定
      this.x = rect.left - 70; // 需要偏移的x向距离
      this.y = -(window.innerHeight - rect.top - 65); // 需要偏移的y向距离
      
      this.$store.commit("add", i);
    },
    changeflag() {
      this.flag = false;
    },
    close() {
      this.show = false;
    },
    //close是传递给子组件的事件，在购物车子组件中，关闭弹出层会执行这个事件 让变量show变成false

    gotodetail(i) {
      this.$router.push({
        path: "/detail",
        query: { title: i.title, price: i.price },
      });
    },
  },

  //   nexttick 在dom更新之后执行的函数
  //   vuedom更新是异步的
};
</script>
<style lang="scss">
html,
body,
#wrap,
#app,
.box {
  height: 100%;
}
.right {
  height: 100%;
  overflow: scroll;
}
.van-popup--bottom {
  bottom: 50px !important;
}
.van-goods-action {
  z-index: 4000 !important;
}
</style>
